<template>
    <div class="online-resume-root">
        <div class="OnlineRes">
            <!--人才信息-->
            <div class="Resume">
                <div class="userImg"><img :src="resume.base.icon" alt=""></div>
                <div class="userInfo">
                    <div class="base">
                        <div class="userName">{{resume.base.name}}</div>
                        <div class="workState">{{resume.base.workState}}</div>
                    </div>
                    <div class="base marginT">
                        <div class="base">
                            <div class="icon margin"></div>
                            <div>{{resume.base.age}}岁</div>
                        </div>
                        <div style="margin-left: 15px;margin-right: 15px">|</div>
                        <div class="base">
                            <div class="icon_experience margin"></div>
                            <div>{{resume.base.workyear}}年经验</div>
                        </div>
                        <div style="margin-left: 15px;margin-right: 15px">|</div>
                        <div class="base">
                            <div class="icon_positioning margin"></div>
                            <div>{{resume.base.site}}</div>
                        </div>
                        <div style="margin-left: 15px;margin-right: 15px">|</div>
                        <div class="base">
                            <div class="icon_salary margin"></div>
                            <div>{{resume.base.pay}}</div>
                        </div>
                    </div>
                    <div class="base marginT">
                        <div class="base">
                            <div class="icon_tel margin"></div>
                            <div>{{resume.base.phone}}</div>
                        </div>
                        <div style="margin-left: 15px;margin-right: 15px">|</div>
                        <div class="base">
                            <div class="icon_email margin"></div>
                            <div>{{resume.base.email}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--期望职位-->
            <div class="jobs marginT1">
                <div class="base marginT2">
                    <div class="empty1 marginR"></div>
                    <div>期望职位</div>
                </div>
                <div class="base marginL1  MB" v-for="item in resume.expos">
                    <div class="base">
                        <div class="icon_positioning margin"></div>
                        <div>{{item.site}}</div>
                    </div>
                    <div class="base margin1">
                        <div class="icon_practice margin"></div>
                        <div>{{item.praType}}</div>
                    </div>
                    <div class="base margin1">
                        <div class="icon_enter_type margin"></div>
                        <div>{{item.comType}}</div>
                    </div>
                    <div class="base margin1">
                        <div class="icon_salary1 margin"></div>
                        <div>{{item.pay}}</div>
                    </div>
                </div>
            </div>
            <!--工作经历-->
            <div class="Work">
                <div class="base marginT2">
                    <div class="empty1 marginR"></div>
                    <div>工作经历</div>
                </div>
                <div class="MB" v-for="item in resume.workExps">
                    <div>
                        <div class="base  marginL1">
                            <div class="marginR1">{{item.cname}}</div>
                            <div class="workTime">{{item.worktime}}</div>
                        </div>
                    </div>
                    <div class="base marginL1 marginT">
                        <div class="base">
                            <div>{{item.wname}}</div>
                        </div>
                        <div style="margin-left: 15px;margin-right: 15px">|</div>
                        <div class="base">
                            <div>{{item.praType}}</div>
                        </div>
                        <div style="margin-left: 15px;margin-right: 15px">|</div>
                        <div class="base">
                            <div>{{item.comType}}</div>
                        </div>
                        <div style="margin-left: 15px;margin-right: 15px">|</div>
                        <div class="base">
                            <div>{{item.city}}</div>
                        </div>
                    </div>
                    <div v-html="item.content" class="WorkCont marginL1">

                    </div>
                </div>
            </div>
            <!--项目经历-->
            <div class="Work">
                <div class="base marginT2">
                    <div class="empty1 marginR"></div>
                    <div>项目经历</div>
                </div>
                <div class="MB" v-for="item in resume.proExps">
                    <div>
                        <div class="base  marginL1">
                            <div class="marginR1">{{item.cname}}</div>
                            <div class="workTime">{{item.worktime}}</div>
                        </div>
                    </div>
                    <div v-html="item.content" class="WorkCont marginL1"></div>
                </div>
            </div>
            <!--执业证书-->
            <div class="certificate">
                <div class="base marginT2">
                    <div class="empty1 marginR"></div>
                    <div>执业证书</div>
                </div>
                <div>
                    <div :class="index!=0?'base marginL2 MB':'base marginT3 marginL2 MB'"
                         v-for="(item,index) in resume.parCerts">
                        <div :class="index==0?'marginR1':'marginR1'">{{item.type}}</div>
                        <div class="workName">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <!--教育经历-->
            <div class="certificate">
                <div class="base marginT2">
                    <div class="empty1 marginR"></div>
                    <div>教育经历</div>
                </div>
                <div style="margin-top:20px">
                    <div v-for="item in resume.eduExps" style="display: flex;flex-direction: column">
                        <div class="base marginL2 MB" v-for="item in resume.eduExps">
                            <div class="marginR1">{{item.name}}</div>
                            <div class="workTime">{{item.time}}</div>
                        </div>
                        <div style="font-size: 14px;" class="base marginL2 MB">
                            <div>{{item.major}}</div>
                            <div style="margin-left: 15px;margin-right: 15px">|</div>
                            <div>{{item.academic}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--职称-->
            <div class="certificate">
                <div class="base marginT2">
                    <div class="empty1 marginR"></div>
                    <div>职称</div>
                </div>
                <div style="margin-top:20px">
                    <div class="base  marginL3 MB">
                        <div class="marginR1">{{resume.certName}}</div>
                    </div>
                </div>
            </div>
        </div>
        <!--底部-->
        <div v-if="showOps" class="bottom">
            <div class="font">当前沟通职位：<span>{{post}}</span></div>
            <div class="base icon_position">
                <div class="base bottomR">
                    <div class="icon_green"></div>
                    <div class="fontG">邀请入职</div>
                </div>
                <div class="base bottomR">
                    <div class="icon_gray"></div>
                    <div class="">不合适</div>
                </div>
                <div class="base">
                    <div class="icon_xiaoxi"></div>
                    <div class="">沟通</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

  import * as _ from 'underscore'
  import _g from '../../../assets/utils/http'

  export default {
    props: {
      showOps: true,
      talentId: {
        type: Number,
        default: 0
      },
      talent: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    watch: {
      talentId: {
        immediate: true,
        handler(n) {
          console.log('start load online ' + n)
          this.loadOnline(n)
        }
      }
      // talent: {
      //   immediate: true,
      //   handler(n) {
      //     if (n) {
      //       console.log('online resume talent', n)
      //       this.loadTalent(n.resumeJson.talentId)
      //
      //     }
      //   }
      // }
    },
    data() {
      return {
        resume: {
          base: {
            name: '张小凡',
            icon: null,
            age: '25',
            workState: '离职，正在找工作',
            workyear: '5',
            site: '城市',
            pay: '0W/0年',
            phone: '13554062206',
            email: '984727790@qq.com'
          },
          expos: [],
          workExps: [{
            cname: '武汉行星轮科技有限公司', worktime: '2 年经验', wname: '职位名称', praType: '执业类型', comType: '企业类型', city: '所在城市',
            content: '1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。' +
              '2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。' +
              '3、严格监督土建工程项目施工质量，参加土建工程检查验收，隐蔽验收及土建工程材料、设备进场检查验收，对土建工程质量负完全责任。' +
              '4、严格监督控制土建工程项目施工成本，参加土建工程现场经济签证的审查确认，确保土建工程项目成本控制目标的实现。'
          }, {
            cname: '武汉行星轮科技有限公司', worktime: '2 年经验', wname: '职位名称', praType: '执业类型', comType: '企业类型', city: '所在城市',
            content: '1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。' +
              '2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。' +
              '3、严格监督土建工程项目施工质量，参加土建工程检查验收，隐蔽验收及土建工程材料、设备进场检查验收，对土建工程质量负完全责任。' +
              '4、严格监督控制土建工程项目施工成本，参加土建工程现场经济签证的审查确认，确保土建工程项目成本控制目标的实现。'
          }],
          proExps: [{
            cname: '武汉行星轮科技有限公司', worktime: '半年', content: '1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。' +
              '2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。' +
              '3、严格监督土建工程项目施工质量，参加土建工程检查验收，隐蔽验收及土建工程材料、设备进场检查验收，对土建工程质量负完全责任。' +
              '4、严格监督控制土建工程项目施工成本，参加土建工程现场经济签证的审查确认，确保土建工程项目成本控制目标的实现。'
          }, {
            cname: '武汉行星轮科技有限公司', worktime: '半年', content: '1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。' +
              '2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。' +
              '3、严格监督土建工程项目施工质量，参加土建工程检查验收，隐蔽验收及土建工程材料、设备进场检查验收，对土建工程质量负完全责任。' +
              '4、严格监督控制土建工程项目施工成本，参加土建工程现场经济签证的审查确认，确保土建工程项目成本控制目标的实现。'
          }],
          parCerts: [{ type: '一级建造师', name: '机电工程' }, { type: '一级建造师', name: '机电工程' }],
          eduExps: [{ name: '华中科技大学', time: '4年' }],
          certName: '高级工程师'
        },
        post: '测绘工程师'
      }
    },
    methods: {
      loadOnline(id) {
        this.lAxios({
          method: 'post', //方法
          url: '/platform/selectOnlineResume.do',
          params: { 'talentId': id }
        }).then(res => {
          res = res.data
          console.log('load online result', res)
          if (res && res.status === 0) {
            const response = res.data
            if (response) {
              this.resume.base.icon = response.talent.image
              this.resume.base.workState = response.talent.jobStateContent
              this.resume.base.workyear = response.talent.workDay
              this.resume.base.name = response.talent.talentName
              this.resume.base.age = response.talent.talentAge
              this.resume.base.phone = response.talent.phoneNumber
              this.resume.base.email = response.talent.email
              this.resume.base.site = response.talent.workCity
              this.resume.base.pay = (response.talent.tax === 0 ? '税前' : '税后') + response.talent.salaryPerMonth + 'W/' + response.talent.monthCount + '年'
              this.resume.expos = _.map(
                response.hopeJobList,
                t => {
                  return {
                    site: t.hopeCity,
                    praType: t.hopeLicenseStr,
                    comType: t.hopeCompanyTypeStr,
                    pay: t.salaryPerMonthLow + '-' + t.salaryPerMonthHigh + 'W/' + t.yearNum + '年'
                  }
                }
              )
              const getDate = function(s) {
                return new Date(s).format('yyyy-MM-dd')
              }
              //工作经历
              this.resume.workExps = _.map(response.jobList, t => {
                return {
                  cname: t.companyName,
                  worktime: getDate(t.jobEndTime) + '/' + getDate(t.jobStartTime),
                  wname: t.jobName,
                  praType: t.licenseTypeStr,
                  comType: t.companyTypeStr,
                  city: t.workCity,
                  content: t.jobContent
                }
              })
              //项目经历
              this.resume.proExps = _.map(response.projectList, t => {
                return {
                  cname: t.projectName,
                  //t.projectEndTime-t.projectStartTime
                  worktime: getDate(t.projectEndTime) + '/' + getDate(t.projectStartTime),
                  content: t.projectContent
                }
              })
              //执业证书
              this.resume.parCerts = _.map(response.licenseList, t => {
                return {
                  type: t.licenseTypeStr,
                  name: t.licenseNum
                }
              })
              //教育经历
              this.resume.eduExps = _.map(response.educationList, t => {
                return {
                  name: t.school,
                  time: getDate(t.endTime) + '/' + getDate(t.startTime),
                  major: t.major,
                  academic: t.academicStr
                }
              })
              //职称
              this.resume.certName = response.title
            }
          }
        })
      }
      // loadTalent(id) {
      //   let self = this
      //   this.lAxios({
      //     method: 'post', //方法
      //     url: '/platform/selectTalentInfoByTalentId.do',
      //     params: { talentId: id }
      //   }).then(function(res) {
      //     res = res.data
      //     console.log('online resume load talent', id, res)
      //     if (!_.isNull(res) && res.status === 0) {
      //       self.resume.base.icon = res.data.image
      //       self.resume.base.workState = res.data.jobStateStr
      //       self.resume.base.workyear = res.data.workDay
      //       self.resume.base.name = res.data.name
      //       self.resume.base.age = res.data.age
      //       self.resume.base.phone = res.data.phone
      //       self.resume.base.email = res.data.email
      //       self.resume.base.site = res.data.city
      //       self.resume.base.pay = res.data.salaryPerMonth + 'W/' + res.data.monthCount + '年'
      //     } else {
      //       _g.message(res.msg, 'warning')
      //     }
      //   })
      // }
    },
    mounted() {

    }
  }
</script>

<style lang="scss" scoped>
    .online-resume-root {
        height: 100%;
        width: 100%;
    }

    .OnlineRes {
        position: relative;
        font-size: 14px;
        padding: 0 50px 0 20px;
    }

    .Resume {
        width: fit-content;
        /*height: 167px;*/
        /*border: 1px solid #f7f7f7;*/
        margin-left: 0;
        display: flex;
        flex-direction: row;
    }

    .userImg {
        width: 105px;
        height: 105px;
        margin-top: 32px;
        margin-left: 30px;
        border-radius: 0px;
    }

    .userImg > img {
        width: 100%;
        height: 100%;
    }

    .userInfo {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-top: 30px;
        margin-left: 19px;
    }

    .userInfo > div {
        margin-bottom: 15px;
    }

    .icon {
        width: 16px;
        height: 16px;
        background: url("../../../assets/img/communication/age.png") no-repeat;
        margin-top: 3px;
    }

    .icon_experience {
        width: 16px;
        height: 16px;
        background: url("../../../assets/img/communication/experience.png") no-repeat;
        margin-top: 3px;
    }

    .icon_positioning {
        width: 15px;
        height: 16px;
        background: url("../../../assets/img/communication/address.png") no-repeat;
        margin-top: 3px;
    }

    .icon_salary {
        width: 16px;
        height: 15px;
        background: url("../../../assets/img/communication/salary.png") no-repeat;
        margin-top: 3px;
    }

    .icon_tel {
        width: 14px;
        height: 16px;
        background: url("../../../assets/img/communication/tel.png") no-repeat;
        margin-top: 3px;
    }

    .icon_email {
        width: 16px;
        height: 16px;
        background: url("../../../assets/img/communication/email.png") no-repeat;
        margin-top: 3px;
    }

    .icon_practice {
        width: 16px;
        height: 16px;
        background: url("../../../assets/img/communication/practice.png") no-repeat;
        margin-top: 3px;
    }

    .icon_enter_type {
        width: 16px;
        height: 16px;
        background: url("../../../assets/img/communication/enter_type.png") no-repeat;
        margin-top: 3px;
    }

    .icon_salary1 {
        width: 16px;
        height: 16px;
        background: url("../../../assets/img/communication/salary1.png") no-repeat;
        margin-top: 3px;
    }

    .base {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .margin {
        margin-right: 5px;
    }

    .margin1 {
        margin-left: 29px;
    }

    .empty, .empty1 {
        width: 2px;
        height: 15px;
        background: #666;
        margin-left: 30px;
        margin-top: 4px;
    }

    .empty1 {
        background-color: #F09338;
    }

    .marginT {
        margin-top: 13px;
    }

    .marginT1 {
        margin-top: 20px;
    }

    .marginT2 {
        margin-top: 33px;
    }

    .marginT3 {
        margin-top: 20px;
    }

    .marginR {
        margin-right: 10px;
    }

    .marginL {
        margin-left: 39px;
    }

    .marginL1 {
        margin-left: 50px;
    }

    .marginL2 {
        margin-left: 50px
    }

    .marginL3 {
        margin-left: 50px;
    }

    .marginR1 {
        margin-right: 30px;
    }

    .MB {
        padding-bottom: 20px;
    }

    .jobs {
        display: flex;
        flex-direction: column;
    }

    .Work {
        /*height: 338px;*/
        display: flex;
        flex-direction: column;
        font-size: 14px;
    }

    .workTime, .workName {
        color: #999;
        font-size: 14px;
        margin-top: 3px;
    }

    .workName {
        color: #333;
        font-weight: bold;
    }

    .WorkCont {
        width: 600px;
        height: fit-content;
        margin-top: 18px;
        /*border: 1px solid #999;*/
        font-size: 14px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        text-align: left;
    }

    .online-resume-root .bottom {
        position: absolute;
        width: 100%;
        height: 78px;
        bottom: 0;
        font-size: 14px;
        background: #FBFBFF;
        /*border: 1px solid red;*/
    }

    .online-resume-root .bottom span {
        color: #4AB0CF;
    }

    .bottomR {
        margin-right: 20px;
    }

    .font {
        width: 379px;
        height: 20px;
        margin-top: 29px;
        margin-left: 51px;
        text-align: left;
    }

    .icon_green {
        width: 16px;
        height: 14px;
        background: url('../../../assets/img/communication/invitation_green.jpg') no-repeat;
        margin-top: 3px;
        margin-right: 8px;
        z-index: 9;
    }

    .icon_gray, .icon_xiaoxi {
        width: 16px;
        height: 16px;
        background: url('../../../assets/img/communication/fit_black.jpg') no-repeat;
        margin-top: 3px;
        margin-right: 8px;
        z-index: 9;
    }

    .icon_xiaoxi {
        background: url('../../../assets/img/communication/xiaoxi_black.png') no-repeat;
    }

    .fontG {
        color: #009944;
    }

    .icon_position {
        position: absolute;
        right: 50px;
        top: 29px;
    }

    .workState {
        width: 144px;
        height: 24px;
        background-color: #4AB0CF;
        border-radius: 10px 10px 10px 0px;
        color: white;
        line-height: 24px;
        text-align: center;
        margin-left: 10px;
        font-size: 14px;
    }

    .userName {
        font-size: 24px;
        color: #333;
        font-weight: bold;
    }

    .certificate {
        /*height:226px;*/
        display: flex;
        flex-direction: column;
    }

    .fJName {
        /*color: #333;*/
        font-size: 16px;
    }

    .jobs > div:nth-child(2) {
        margin-top: 20px;
    }

    .Work > div:nth-child(2) {
        margin-top: 20px;
    }

</style>
